
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>demo</title>
        <style>
        #div1{
            width:100px;
            height: 100px;
            margin:200px auto;
            background-color: red;
        } 
        #div2{
            width: 200px;
            height: 300px;
            position: absolute;
            left:100px;
            top:300px;
            background-color: blue;
        }
        </style>
    </head> 
    <body> 
        <div id="div3" style="background-color:brown;position:absolute;left:50px;top:50px;width:100px;height:100px"></div>
        <div id="div1"></div> 
        <div id="div2"></div> 
        <script>
            div1.addEventListener('dragstart',(event) => {
                //event.dataTransfer.setDragImage(img, 20, 20)
                event.dataTransfer.setData('Text', event.target.id)
            })
            div2.addEventListener('dragenter',(e) => {
                console.log('now enter the div2')
            })
            div2.addEventListener('dragover',(e) => {
                e.dataTransfer.dropEffect = 'copy' //chrome 下默认就是copy, 也可以对链接用 link 
                document.getElementById('div2').style.backgroundColor='green'
                e.preventDefault()
            })

            div2.addEventListener('drop', (e) => {
                var _id = e.dataTransfer.getData('Text')
                e.target.appendChild(document.getElementById(_id))
            })
        </script> 
    </body> 
</html>